<%--
    @Description： LAP品生产流动数月报
    @Author： 樊双峰
    @Date： 2018-08-16 20:30
--%>
<style type="text/css">
tr, th, td {
    text-align: center;
}
</style>
<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/LapProdFlowNum/lapProdFlowNum"
          method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="${SYS_QUERY_NAME}"/>
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <label>起始时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="start-date-input" readonly value="${startTime}">&nbsp;
            <label>结束时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="endTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="end-date-input" readonly value="${endTime}">&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/Base/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>&nbsp;
        </div>
    </form>
</div>

<div class="bjui-pageContent tableContent">
    <g:if test="${report_011.size() > 0}">
        <div style="margin:0px auto; width:96%;">
            <div class="row" style="padding: 0px 0px;">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>LAP品生产流动数</h3>
                        </div>
                        <div class="panel-body">
                            <div style="mini-width:200px;height:450px;" id="lapProdFlowNumChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </g:if>
    <div style="margin:15px auto; width:96%;">
        <div class="row" style="padding: 0px 0px;">
            <div class="col-md-12" id="">
                <g:if test="${report_011.size() > 0}">
                    <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                        <thead>
                        <tr>
                            <th width="50">NO.</th>
                            <th width="100"><g:message code="PROD_DATE" default="PROD_DATE"/></th>
                            <g:each in="${report_011}" status="i" var="dataInstance">
                                <g:each in="${tableHeadList}" status="j" var="headInstance">
                                    <g:if test="${headInstance == 'PROD_DATE'}">
                                        <th width="120">${dataInstance["${headInstance}"]}</th>
                                    </g:if>
                                </g:each>
                            </g:each>
                        </tr>
                        </thead>
                        <tbody>
                        <g:each in="${tableHeadList}" status="i" var="headInstance">
                            <g:if test="${headInstance != 'RN'}">
                                <g:if test="${headInstance != 'PROD_DATE'}">
                                    <tr>
                                        <td>${i}</td>
                                        <td><g:message code="${headInstance}" default="${headInstance}"/></td>
                                        <g:each in="${report_011}" status="j" var="dataInstance">
                                            <td>${dataInstance["${headInstance}"]}</td>
                                        </g:each>
                                    </tr>
                                </g:if>
                            </g:if>
                        </g:each>
                        </tbody>
                    </table>
                </g:if>
                <g:else>
                    <g:render template="../template/emptyPanel"/>
                </g:else>
            </div>
        </div>
    </div>
</div>
<g:render template="../template/pagination"/>
<g:render template="../template/echarts"/>
<script type="text/javascript">
    var contextPath = '${request.getContextPath()}';
    eChartsTool.init(contextPath);
    var lapProdFlow = function() {
        var prodDate = [];
        <g:each in="${report_011}" status="i" var="dataInstance">
            <g:each in="${tableHeadList}" status="j" var="headInstance">
                <g:if test="${headInstance == 'PROD_DATE'}">
                    prodDate.push('${dataInstance["${headInstance}"]}')
                </g:if>
            </g:each>
        </g:each>
        var option = {
            title: {},
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data: [
                    <g:each in="${tableHeadList}" status="i" var="headInstance">
                        <g:if test="${headInstance != 'RN'}">
                            <g:if test="${headInstance != 'PROD_DATE'}">
                                '<g:message code="${headInstance}" default="${headInstance}"/>',
                            </g:if>
                        </g:if>
                    </g:each>
                ]
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: prodDate,
                axisLabel: {
                    rotate: 23
                },
            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                <g:each in="${tableHeadList}" status="i" var="headInstance">
                    <g:if test="${headInstance != 'RN'}">
                        <g:if test="${headInstance != 'PROD_DATE'}">
                            {
                                name: '<g:message code="${headInstance}" default="${headInstance}"/>',
                                data:[
                                    <g:each in="${report_011}" status="j" var="dataInstance">
                                        ${dataInstance["${headInstance}"]},
                                    </g:each>
                                ],
                                type: 'line',
                                areaStyle: {
                                    normal: {}
                                }
                            },
                        </g:if>
                    </g:if>
                </g:each>
            ]
        };
        eChartsTool.setOption("shine", document.getElementById('lapProdFlowNumChart'), option);
    }

    $(function(){
        <g:if test="${report_011.size() > 0}">
            lapProdFlow();
        </g:if>
    });
</script>